import { useEffect, useState } from 'react'
import { Select } from 'antd'
import { getChannelsAPI } from 'api/channels';
const { Option } = Select
export default function Channel({ value, onChange }) {
    // 获取频道信息
    const [channels, setChannels] = useState([])
    const getChannelList = async () => {
        const res = await getChannelsAPI()
        setChannels(res.data.channels);
    }

    // 组件挂载时
    useEffect(() => {
        // 获取频道信息
        getChannelList()
    }, [])

    return (
        <Select value={value} onChange={onChange} style={{ width: 200 }} placeholder="请选择频道" allowClear>
            {
                channels.map((item) => {
                    return <Option key={item.id} value={item.id}>{item.name}</Option>
                })
            }
        </Select>
    )
}
